<template>
  <div>
    <van-nav-bar title="订单" left-text="返回" right-text="" left-arrow @click-left="onClickLeft" />
  
    <van-tabs v-model="active">
      <van-tab title="全部">
        <div class="order-container" v-for="(item, index) in getVerifyGoods" :key="index">
          <!-- 商品图片部分 -->
          <div class="product-images">
            <div class="imgBox flex overFlow">
              <img v-for="(item, index) in getVerifyGoods[index].carts" :key="index" :src="item.imgUrl">
              <!-- <img src="https://via.placeholder.com/60" alt="Product 2"> -->
            </div>
            <i class="iconfont icon-jiantouyou"></i>
          </div>
          <!-- 订单总结部分 -->
          <div class="order-summary">
            <p><span>共{{getVerifyGoods[index].carts.length}}件商品 实付</span>
            <span class="amount">¥{{ (getVerifyGoods[index].totalMoney/100).toFixed(2) }}</span></p>
            <span class="delete-icon" @click="deleteGoodsVerify(index)"><van-icon name="close" /></span>
          </div>
  
          <!-- 订单状态部分 -->
          <div class="order-status">
            <span>订单状态：已支付</span>
            <i class="iconfont icon-icon01"></i>
          </div>
        </div>
      </van-tab>
      <van-tab title="待付款">内容 2</van-tab>
      <van-tab title="待发货">内容 3</van-tab>
      <van-tab title="已取消">内容 4</van-tab>
    </van-tabs>
  
    <div style="height: 60px"></div>
    <Footer></Footer>
  </div>
</template>

<script>
import request from "@/utils/request";
import { mapState, mapGetters } from 'vuex';
import Footer from '../../components/Footer.vue';

export default {
  name: "OrderList",
  components: {
    Footer
  },
  data() {
    return {
      active: 0,
      createVerifyData: {},// 当前接收到的订单数据
      orderList: [], // 订单列表
      currPage: 1, // 当前页数
      getVerifyGoods: [], // List
    }
  },
  created() {
    this.getVerifyList(); // 获取订单列表
    this.createVerifyData = this.getOrderData
    // console.log(this.createVerifyData)
    this.addOrderToList(); // 将初始订单加入列表
    // console.log(this.orderList)

  },
  computed: {
    ...mapState(['orderData']),
    ...mapGetters(['getOrderData']),
    cartsList() {
      return this.createVerifyData.carts || [];
    }
  },
  watch: {
    getOrderData(newOrderData) {
      this.createVerifyData = newOrderData; // 更新当前数据
      this.addOrderToList(); // 新订单追加到列表
    },
  },
  methods: {
    async getVerifyList() {
      const params = {
        token: this.token,
        currPage: this.currPage           // 当前页码
      };
      let res = await request.get('/order/list', { params })

      this.getVerifyGoods = res.list
      console.log('getVerifyGoods', this.getVerifyGoods);
    },
    onClickLeft() {
      // Toast('返回');
      this.$router.push('/home');
      console.log(this.createVerifyData);
    },
    // addOrderToList() {
    //   if (this.getOrderData) {
    //     // 将订单追加到订单列表
    //     this.orderList.push(this.getOrderData);
    //   }
    // },
    addOrderToList() {
      if (this.createVerifyData && Object.keys(this.createVerifyData).length > 0) {
        this.orderList.push(this.createVerifyData); // 深拷贝加入列表
      }
    },
    async deleteGoodsVerify(index) {
      try {
        let res = await request.post("/order/del", { orderId: this.getVerifyGoods[index].orderId });
        console.log(res);
        if (res.code === 666) { // 假设666是后端定义的成功状态码
          this.$toast.success("删除订单成功");
          // 从数组中移除对应索引的元素（会触发Vue的响应式更新）
          this.getVerifyGoods.splice(index, 1); // 👈 关键代码
        } else {
          // this.$toast.fail(res.msg); // 使用后端返回的消息
        }
      } catch (error) {
        this.$toast.fail("删除订单失败");
      }
    }
  },
}
</script>
<style lang="less" scoped>
@import 'list.less';
</style>
